<template>
  <div class="BackBar w-100">
    <div class="row head-wrap text-light">
      <div class="col-3 text-center">
        <router-link to="/" tag="div">
          <div class="banner-back">
            <span class="iconfont">&#xe720;</span>
          </div>
        </router-link>
      </div>
    </div>
    <Fade>
      <div class="row w-100 m-0 bg-info head-wrap text-light back-bar-fixed" v-show="isShow">
        <div class="col-3 text-center">
          <router-link to="/" class="text-light">
            <span class="iconfont">&#xe720;</span>返回
          </router-link>
        </div>
        <div class="col-6 text-center">景点详情</div>
      </div>
    </Fade>
  </div>
</template>

<script>
import Fade from "@/components/common/Fade";
export default {
  name: "BackBar",
  props: {
    isShow: {
      type: Boolean,
      required: true,
      default() {
        return false;
      }
    }
  },
  data() {
    return {};
  },
  components: {
    Fade
  },
  methods: {},
  mounted() {}
};
</script>


<style scoped>
.BackBar {
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 1;
}
.banner-back {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  /* background: rgba(161, 28, 28, 0.4); */
}
.back-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
